<template>
  <div class="detail-container" v-loading="loading">
    <!-- <el-button
      size="small"
      @click="toBalck">返回</el-button> -->
      <el-button
        type="primary"
        size="small"
        v-if="newCustomersInfo.isMy==1"
        @click="toAddCustomer">编辑</el-button>
    <el-card shadow="never" style="margin-top: 15px;">
      <!-- 客户名称 -->
      <div slot="header" class="clearfix" style="position: relative">
        <span class="kehu-name">{{newCustomersInfo.customerNumber}}</span>
        <span class="kehu-name" v-if="newCustomersInfo.isShowCustomerName">{{newCustomersInfo.customerName}}</span>
        <span class="kehu-label" v-if="newCustomersInfo.isDelete==1">回收站</span>
        <span class="kehu-label" v-if="newCustomersInfo.isCharge==1">公海</span>
        <span class="kehu-label" v-if="newCustomersInfo.isFocusOn==1">重点关注</span>

        <div style="font-size:14px;margin-top:16px">
          <span>统一社会信用代码：</span>{{newCustomersInfo.businessCode}}
          <el-button type="text" size="small" v-if="newCustomersInfo.isMy==1" @click="editCode">
            修改信用码
            <el-tooltip class="item" effect="dark" content="此功能仅在客户变更抬头时使用，修改后可以通过【新建客户】的方式来新增抬头变更后的客户！" placement="top-start">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-button>
        </div>
        <div class="kehu-info" style="position: absolute;right:0;top:0px">
          <div>
<!--            <el-button type="primary" v-if="newCustomersInfo.isMy==1" size="mini" @click="showSonCustomer('add',newCustomersInfo)">新增子客户</el-button>-->
            <el-button v-if="newCustomersInfo.isCanMove==1" :loading="btnLoading" type="primary" size="mini" style="text-align: center" @click="showQuit">转移</el-button>
            <el-button v-if="newCustomersInfo.isCanDelay==1" type="primary" size="mini" style="text-align: center" @click="delayCustomer">延期</el-button>
            <el-button v-if="addSaleWorkOrder && newCustomersInfo.isBlackList != 1 && newCustomersInfo.isDelete != 1 && newCustomersInfo.isCharge != 1" type="primary" size="mini" style="text-align: center" @click="workOrder">发布工单</el-button>
            <el-button v-if="newCustomersInfo.isMy==1" type="primary" size="mini" style="text-align: center" @click="changeFocusOn">
              {{ newCustomersInfo.isFocusOn==1 ? '移除关注' : '重点关注' }}</el-button>
          </div>
          <div>
             <span>最近跟进日期：{{newCustomersInfo.trackingTime}}</span>
             <span>创建日期： {{newCustomersInfo.createTime}}</span>
          </div>
          <div>
            <span>负责人：{{newCustomersInfo.userName}}</span>
            <span>创建人：{{newCustomersInfo.createName}}</span>
            <span>协助人：{{newCustomersInfo.subChargeNames}}</span>
          </div>
        </div>
        <div style="clear: both;height:20px"></div>
        <!-- 绑定 修改 主/子客户 -->
        <div v-if="newCustomersInfo.isDelete != 1 && newCustomersInfo.isCharge != 1">
          <div v-if="newCustomersInfo.parentId&&newCustomersInfo.sonCustomer&&newCustomersInfo.sonCustomer.length==0" style="font-size:12px;">
            <div v-if="newCustomersInfo.parentName != ''">主客户：
              <span style="cursor: pointer;color:#409eff;text-decoration: underline" @click="toCustomerInfo(newCustomersInfo.parentId)" >{{newCustomersInfo.parentName}}</span>
            </div>
            <div>
              <el-button size="small" type="text" @click="showfj(1,'edit')" >
                  修改主客户
                  <el-tooltip class="item" effect="dark" content="修改对应的主客户" placement="top-start">
                    <i class="el-icon-info"></i>
                  </el-tooltip>
              </el-button>
              <el-button size="small" type="text" @click="delfj">
                    解绑主客户
                  <el-tooltip class="item" effect="dark" content="解绑后，变成主客户，可以成为别人的子客户或主客户" placement="top-start">
                    <i class="el-icon-info"></i>
                  </el-tooltip>
              </el-button>
            </div>
          </div>
          <div v-if="!newCustomersInfo.parentId && newCustomersInfo.sonCustomer && newCustomersInfo.sonCustomer.length == 0">
            <el-button size="small" type="text" @click="showfj(1,'add')">
                绑定主客户
              <el-tooltip class="item" effect="dark" content="绑定无子客户的客户或存在子客户的主客户" placement="top-start">
                <i class="el-icon-info"></i>
              </el-tooltip>
            </el-button>
            <el-button type="text" size="mini" @click="showfj(4)">
              绑定子客户
              <el-tooltip class="item" effect="dark" content="只能绑定无主客户的客户，不可以绑定已存在子客户的主客户也不可以绑定别人的子客户，若绑定，请先解绑" placement="top-start">
                <i class="el-icon-info"></i>
              </el-tooltip>
            </el-button>
          </div>
          <div v-if="newCustomersInfo.sonCustomer && newCustomersInfo.sonCustomer.length > 0" style="border-top:1px solid #eee;padding-top:5px;font-size: 12px">
            <div>子客户:
              <span
                v-for="(item,index) in newCustomersInfo.sonCustomer"
                :key="index"
                style="background: #fdf6ec;border:1px solid #f5dab1;padding:2px 10px;border-radius: 5px;display: inline-block;cursor: pointer;margin-bottom:5px;margin-right:5px;white-space:nowrap;"
                @click="toCustomerInfo(item.customerId)">{{item.customerNumber}}<span style="padding-left:5px" v-if="newCustomersInfo.isShowCustomerName">{{item.customerName}}</span></span>
            </div>
            <el-button type="text" size="mini" @click="showfj(3)">
              转移主客户
              <el-tooltip class="item" effect="dark" content="主客户权限转移给子客户且只能转给自己的子客户" placement="top-start">
                <i class="el-icon-info"></i>
              </el-tooltip>
            </el-button>
            <el-button type="text" size="mini" @click="showfj(4)">
              绑定子客户
              <el-tooltip class="item" effect="dark" content="只能绑定无主客户的客户，不可以绑定已存在子客户的主客户也不可以绑定别人的子客户，若绑定，请先解绑" placement="top-start">
                <i class="el-icon-info"></i>
              </el-tooltip>
            </el-button>
          </div>
        </div>
      </div>
      <div style="overflow:hidden;">
        <!-- 客户信息 -->
        <div style="min-height:calc(100vh - 150px);width:300px;float:left">
          <div class="kehu-info-left">
            <div class="left-item"><span>法人：</span>{{newCustomersInfo.legalPerson}}</div>
            <div class="left-item"><span>行业：</span>{{newCustomersInfo.industry}}</div>
            <div class="left-item"><span>成立日期：</span>{{newCustomersInfo.issueDate}}</div>
            <div class="left-item">
              <span>主联系人：</span>{{newCustomersInfo.isMy==1?newCustomersInfo.contactName:'******'}}
            </div>
            <div class="left-item">
              <span>联系电话：</span>{{newCustomersInfo.isMy==1?newCustomersInfo.contactMobile:'******'}}
            </div>
            <div class="left-item"><span>职务：</span>{{newCustomersInfo.contactDuty}}</div>
            <div class="left-item"><span>客户行业：</span><label>{{newCustomersInfo.newIndustry}}</label></div>
            <div class="left-item"><span>客户性质：</span><label style="color:Red">{{newCustomersInfo.customerQuantity}}</label></div>
            <div class="left-item"><span>客户规模：</span>{{newCustomersInfo.newScale}}</div>
            <div class="left-item"><span>规模性质：</span><label style="color:Red">{{newCustomersInfo.newNature}}</label></div>
            <div class="left-item"><span>客户分类：</span><label style="color:Red">{{newCustomersInfo.customerNewType}}</label></div>
            <div class="left-item"><span>月用量：</span>{{newCustomersInfo.aboutBuyNum}}</div>
            <div class="left-item"><span>预估月毛利：</span>{{newCustomersInfo.aboutPerProfitNum}}</div>
            <div class="left-item"><span>所在地区：</span>{{newCustomersInfo.areaInfo}}</div>
            <div class="left-item"><span>详细地址：</span>{{newCustomersInfo.regAddress}}</div>
            <div class="left-item"><span>经营范围：</span>{{newCustomersInfo.businessInfo}}</div>
            <div class="left-item"><span style="width:120px;">开票是否明细：</span> {{newCustomersInfo.isInvoiceNeedDetail == 1 ? '是' : newCustomersInfo.isInvoiceNeedDetail == 0 ? '否' : ''}}</div>
          </div>
        </div>
        <div style="float:left;width:calc(100% - 300px)" id="right-div">
            <el-tabs v-model="activeName2" @tab-click="changeActiveName2" >
              <!-- 总览 -->
              <el-tab-pane label="总览" name="1">
                  <div style="min-height:280px">
                     <div class="fenxi-row">
                        <div class="fenxi-col" style="cursor: pointer" v-for="(item,index) in buyCount" :key="index" @click="showOrderList(item.goodsName)" >
                          <div class="num">{{item.goodsNum}}吨</div>
                          <div class="name">{{item.goodsName}}</div>
                        </div>
                      </div>
                        <table cellspacing="0" cellpadding="0" style="width:100%" class="tongJitable" v-if="statistics">
                            <tr>
                                <td rowspan="4" class="bgtd" align="center">
                                    <div style="font-weight:bold;font-size:16px;margin-bottom:5px;">{{statistics.orders}}</div>
                                    合同总数
                                </td>
                                <td class="bgtd"><div class="tddiv">取消总数</div></td>
                                <td class="bgtd"><div class="tddiv">当日取消数</div></td>
                                <td class="bgtd"><div class="tddiv">2日内取消数</div></td>
                                <td class="bgtd"><div class="tddiv">3-7天内取消数</div></td>
                                <td class="bgtd"><div class="tddiv">7天以上取消数</div></td>
                                <td class="bgtd"><div class="tddiv">降价原因取消数</div></td>
                                <td class="bgtd"><div class="tddiv">我司原因取消数</div></td>
                                <td class="bgtd"><div class="tddiv">其它原因取消数</div></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('cancelAll')" type="primary" >
                                            {{statistics.cancelAll}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('cancelToDay')" type="primary" >
                                            {{statistics.cancelToDay}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('cancelTwoDay')" type="primary" >
                                            {{statistics.cancelTwoDay}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('cancelWeek')" type="primary" >
                                            {{statistics.cancelWeek}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('cancelThanWeek')" type="primary" >
                                            {{statistics.cancelThanWeek}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('cancelByPriceReduction')" type="primary" >
                                            {{statistics.cancelByPriceReduction}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('cancelByWeCompanyReason')" type="primary" >
                                            {{statistics.cancelByWeCompanyReason}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('cancelByOtherReason')" type="primary" >
                                            {{statistics.cancelByOtherReason}}
                                        </el-link>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="bgtd"><div class="tddiv">总付款数</div></td>
                                <td class="bgtd"><div class="tddiv">履约付款数</div></td>
                                <td class="bgtd"><div class="tddiv">超1天付款数</div></td>
                                <td class="bgtd"><div class="tddiv">超2天付款数</div></td>
                                <td class="bgtd"><div class="tddiv">超3天付款数</div></td>
                                <td class="bgtd"><div class="tddiv">未付款数</div></td>
                                <td class="bgtd"><div class="tddiv">--</div></td>
                                <td class="bgtd"><div class="tddiv">--</div></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('payAll')" type="primary" >
                                            {{statistics.payAll}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('payToDay')" type="primary" >
                                            {{statistics.payToDay}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('payOneDay')" type="primary" >
                                            {{statistics.payOneDay}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('payTwoDay')" type="primary" >
                                            {{statistics.payTwoDay}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('payThreeDay')" type="primary" >
                                            {{statistics.payThreeDay}}
                                        </el-link>
                                    </div>
                                </td>
                                <td>
                                    <div class="tddiv">
                                        <el-link @click="toSaleList('payNo')" type="primary" >
                                            {{statistics.payNo}}
                                        </el-link>
                                    </div>
                                </td>
                                <td><div class="tddiv">--</div></td>
                                <td><div class="tddiv">--</div></td>
                            </tr>
                        </table>
                        <div style="margin-top:20px">客户级别：<span style="font-weight: bold">{{newCustomersInfo.newLevel}}</span>
                        </div>
                        <div style="margin:20px 0">客户信息完成度：<span style="font-weight: bold">{{newCustomersInfo.completeRate}}</span>
                        </div>
                    </div>
              </el-tab-pane>
                <!-- 采购频次 -->
                <el-tab-pane label="采购频次" name="2">
                    <div style="min-height:400px">
                        <div class="fenxi-row">
                            <div class="fenxi-col">
                                <div class="num">{{perMonthOrderNum}}</div>
                                <div class="name">月均采购次数</div>
                            </div>
                            <div class="fenxi-col">
                                <div class="num">{{perMonthGoodsNum}}</div>
                                <div class="name">月均采购总量</div>
                            </div>
                        </div>
                        <div class="tiaojian-div">
                            <el-radio-group v-model="radio2"  size="mini" @change="getCustomerBuyRate">
                                <el-radio-button label="采购频率"></el-radio-button>
                                <el-radio-button label="采购数量"></el-radio-button>
                            </el-radio-group>
                            <el-select v-model="year2" size="small" clearable placeholder="请选择年份" style="float:right"  @change="getCustomerBuyRate">
                                <el-option  v-for="item in years" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <div id="myChart2" :style="{'width':chartW+'px','height':'300px'}" v-loading="loadingChart2"></div>
                    </div>
                </el-tab-pane>
                <!-- 采购毛利 -->
                <el-tab-pane label="采购毛利" name="3">
                    <div style="min-height:400px">
                        <div class="fenxi-row">
                            <div class="fenxi-col" v-for="(item,index) in gongXianCount" :key="index">
                                <div class="num">{{item.value}}</div>
                                <div class="name">{{item.name}}总额</div>
                            </div>

                        </div>
                        <div class="tiaojian-div">
                            <el-radio-group v-model="radio3"  size="mini" @change="getCustomerProfit">
                                <el-radio-button :label="item" v-for="item in goodsList" :key="item"></el-radio-button>
                            </el-radio-group>
                            <el-select v-model="year3" size="small" clearable placeholder="请选择年份" style="float:right" @change="getCustomerProfit">
                                <el-option  v-for="item in years" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <div id="myChart3" :style="{'width':chartW+'px','height':'300px'}" v-loading="loadingChart3"></div>
                    </div>
                </el-tab-pane>
                <!-- 采购量 -->
                <el-tab-pane label="采购量" name="4">
                    <div style="min-height:330px">
                        <div class="tiaojian-div">
                            <el-radio-group v-model="radio4"  size="mini" @change="getcustomerBuyGoods">
                                <el-radio-button :label="item" v-for="item in goodsList" :key="item"></el-radio-button>
                            </el-radio-group>
                            <el-select v-model="year4" size="small" clearable placeholder="请选择年份" style="float:right" @change="getcustomerBuyGoods">
                                <el-option  v-for="item in years" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <div id="myChart4" :style="{'width':chartW+'px','height':'300px'}" v-loading="loadingChart4"></div>
                    </div>
                </el-tab-pane>
            </el-tabs>
                <el-tabs v-model="activeName" @tab-click="changeActiveName" >
                    <!-- 新增字段 -->
                    <el-tab-pane label="产品信息" name="1">
                        <el-button v-if="newCustomersInfo.isMy==1" size="small" type="primary" @click="addProduct()">{{materialList.length > 0 ? '编辑产品' : '新增产品'}}</el-button>
                        <el-table
                          v-loading="materialLoading"
                          :data="materialList"
                          border
                          style="width: 100%; margin-top: 20px">
                            <el-table-column
                                    prop="categoryName"
                                    label="品类"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                              prop="monthOrderAllGoodsNum"
                              label="品类历史销售量"
                              align="center">
                            </el-table-column>
                            <el-table-column
                                    label="牌号"
                                    align="center">
                              <template slot-scope="scope">
                                 {{scope.row.goodsSn.join(",")}}
                              </template>
                            </el-table-column>
                            <el-table-column
                                    prop="monthUseNum"
                                    label="每月用量"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                              prop="monthOrderGoodsNum"
                              label="本月销售量"
                              align="center">
                            </el-table-column>
                          <el-table-column
                            label="销量占比"
                            min-width="100"
                            align="center">
                            <template slot-scope="scope">
                              <span v-if="scope.row.monthUseNum">{{(scope.row.monthOrderGoodsNum / scope.row.monthUseNum *100).toFixed(2)}}%</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="monthShipPerProfit"
                            label="吨毛利"
                            align="center">
                          </el-table-column>
                          <el-table-column
                            label="替换牌号"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.replaceGoodsSn.join(",")}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="supplierName"
                            label="采购渠道"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.supplierName.join(",")}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="competitor"
                            label="竞对名称"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.competitor.length == 0 ? "后续确认" :scope.row.competitor.join(",")}}
                            </template>
                          </el-table-column>


<!--                            <el-table-column-->
<!--                                    label="操作"-->
<!--                                    align="center">-->
<!--                                <template slot-scope="scope">-->
<!--                                    <el-button-->
<!--                                      v-if="newCustomersInfo.isMy==1"-->
<!--                                      @click="addProduct('edit',scope.row)"-->
<!--                                      type="text"-->
<!--                                      size="mini">修改-->
<!--                                    </el-button>-->
<!--                                    <el-button-->
<!--                                      @click="addProduct('see',scope.row)"-->
<!--                                      type="text"-->
<!--                                      size="mini">查看-->
<!--                                    </el-button>-->
<!--                                </template>-->
<!--                            </el-table-column>-->
                        </el-table>
<!--                        <div class="pagination-container">-->
<!--                            <el-pagination-->
<!--                                    background-->
<!--                                    @size-change="handleSizeChangeMaterial"-->
<!--                                    @current-change="handleCurrentChangeMaterial"-->
<!--                                    layout="total, sizes,prev, pager, next,jumper"-->
<!--                                    :current-page.sync="materialParams.pageNum"-->
<!--                                    :page-size="materialParams.pageSize"-->
<!--                                    :page-sizes="[10,15,20]"-->
<!--                                    :total="materialCount">-->
<!--                            </el-pagination>-->
<!--                        </div>-->
                    </el-tab-pane>
                    <el-tab-pane label="联系人" name="2" v-if="newCustomersInfo.isMy == 1">
                        <div><el-button size="small" type="primary" @click="showContact('add',null)">新增联系人</el-button></div>
                        <el-table
                                v-loading="contactLoading"
                                :data="contactPageList"
                                border
                                style="width: 100%; margin-top: 20px">
                            <el-table-column
                                    prop="contactName"
                                    label="联系人"
                                    width="180"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="contactMobile"
                                    label="手机号"
                                    width="180"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="contactDuty"
                                    label="职务"
                                    width="180"
                                    align="center">
                            </el-table-column>

                            <el-table-column
                                    label="是否为主联系人"
                                    width="150"
                                    align="center">
                                <template slot-scope="scope">
                                    <!-- <el-switch
                                            v-if="isMy"
                                            @change="changeMainContact(scope.row)"
                                            v-model="scope.row.isMainContact"
                                            :active-value="1"
                                            :inactive-value="0">
                                    </el-switch> -->
                                    <div>{{ scope.row.isMainContact==1 ? '是' : '否' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="是否有采购决定权"
                                    width="150"
                                    align="center">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.isBuyPermission==1 ? '是' : '否' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                              label="是否接收短信"
                              width="150"
                              align="center">
                              <template slot-scope="scope">
                                <div>{{ scope.row.isSendSms==1 ? '是' : '否' }}</div>
                              </template>
                            </el-table-column>
                            <el-table-column
                                    prop="contactFocus"
                                    label="关注点"
                                    width="180"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="生日"
                                    width="100"
                                    prop="contactBirthday"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="爱好"
                                    width="200"
                                    prop="contactHobby"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    fixed="right"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-button
                                            v-if="scope.row.isDelete != 1"
                                            @click="showContact('edit',scope.row)"
                                            type="text"
                                            size="mini">编辑
                                    </el-button>
                                    <el-button
                                      v-if="delCustomerContact"
                                      @click="delContact(scope.row)"
                                      type="text"
                                      size="mini">删除
                                    </el-button>
                                    <el-button
                                      @click="callMobile(scope.row)"
                                      type="text"
                                      size="mini">电话联系
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination-container">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChangeContact"
                                    @current-change="handleCurrentChangeContact"
                                    layout="total, sizes,prev, pager, next,jumper"
                                    :current-page.sync="contactParams.pageNum"
                                    :page-size="contactParams.pageSize"
                                    :page-sizes="[10,15,20]"
                                    :total="contactCount">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="跟进记录" name="3">
                        <div class="genjin-list" v-loading="trackingLoading">
                            <div class="genjin-item" v-for="(item,index) in trackingList" :key="index">
                                <div class="genjin-top">
                                    <span style="color:#409EFF">{{item.trackingUser}}</span> {{item.trackingTime*1000 | formatTime}} 对 <span style="color:Red">{{item.contactName}}</span> 跟进 <span style="padding-left:30px">跟进方式：{{item.trackingType}}</span><span style="padding-left:30px">产品线：{{item.goodsLineNames}}</span>
                                    <div class="right-btn">
                                        <el-button
                                                v-if="item.orderId != 0"
                                                @click="toOrderDetail(item)"
                                                type="text"
                                                size="mini">
                                            查看订单
                                        </el-button>
                                    </div>
                                </div>
                                <div class="genjin-con">
                                    {{item.trackingContent}}
                                    <div v-if="item.trackingRemark != ''">备注：{{item.trackingRemark}}</div>
                                </div>
                            </div>
                        </div>
                        <div style="text-align: center;padding-top:50px;font-size: 12px;color:#888" v-if="trackingCount==0 && !trackingLoading">- 暂无记录 -</div>
                        <div class="pagination-container">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChangeTracking"
                                    @current-change="handleCurrentChangeTracking"
                                    layout="total, sizes,prev, pager, next,jumper"
                                    :current-page.sync="trackingParams.pageNum"
                                    :page-size="trackingParams.pageSize"
                                    :page-sizes="[10,15,20]"
                                    :total="trackingCount">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
<!--                    <el-tab-pane label="客户信息" name="11">-->
<!--                        <table border="0" cellpadding="0" cellspacing="0" class="custom-table">-->
<!--                          <tr>-->
<!--                             <td rowspan="11" width="150" align="center" style="background: #f5f7fa;font-weight: bold">基本情况</td>-->
<!--                             <td width="150" style="background: #f5f7fa">企业名称</td>-->
<!--                             <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">所属行业</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">主营产品</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">线设备产</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">年产值规模</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">所使用的产品以及牌号</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">年采购规模</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">主要采购渠道</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">采购习惯</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">安全库存</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">付款方式</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td rowspan="4" width="150" align="center" style="background: #f5f7fa;font-weight: bold">下游客户情况</td>-->
<!--                            <td  style="background: #f5f7fa">下游客户类型</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td  style="background: #f5f7fa">下游品质要求</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">下游客户订单情况</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">下游回款情况</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td rowspan="8" width="150" align="center" style="background: #f5f7fa;font-weight: bold">组织情况</td>-->
<!--                            <td style="background: #f5f7fa">员工人数</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">管理人员数</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">老板</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">采购负责人</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td  style="background: #f5f7fa">产品使用人</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td  style="background: #f5f7fa">技术负责人</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">信息人</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->
<!--                          <tr>-->
<!--                            <td style="background: #f5f7fa">采购决策流程</td>-->
<!--                            <td></td>-->
<!--                          </tr>-->

<!--                        </table>-->

<!--                    </el-tab-pane>-->
                    <el-tab-pane label="管理跟进" name="12">
                      <el-button
                        v-if="newCustomersInfo.isManageUser == 1"
                        type="primary"
                        size="mini"
                        @click="manageFms()">新增管理跟进
                      </el-button>
                          <el-table
                            v-loading="manageFmsLoading"
                            :data="manageFmsList"
                            border
                            style="width: 100%; margin-top: 20px">
                            <el-table-column
                              min-width="100"
                              prop="trackingUserName"
                              label="跟进人"
                              align="center">
                            </el-table-column>
                            <el-table-column
                              min-width="150"
                              prop="trackingTime"
                              label="跟进时间"
                              align="center">
                            </el-table-column>
                            <el-table-column
                              min-width="150"
                              prop="createdTime"
                              label="创建时间"
                              align="center">
                            </el-table-column>
                            <el-table-column
                              min-width="200"
                              prop="trackingContent"
                              label="跟进内容"
                              align="center">
                            </el-table-column>
                            <el-table-column
                              min-width="100"
                              prop="trackingMethod"
                              label="跟进方式"
                              align="center">
                            </el-table-column>
                          </el-table>
                          <div class="pagination-container">
                            <el-pagination
                              background
                              @size-change="handleSizeChangeManageFms"
                              @current-change="handleCurrentChangeManageFms"
                              layout="total, sizes,prev, pager, next,jumper"
                              :current-page.sync="fmslistQuery.pageNum"
                              :page-size="fmslistQuery.pageSize"
                              :page-sizes="[10,15,20]"
                              :total="manageFmsCount">
                            </el-pagination>
                          </div>
                    </el-tab-pane>
                    <el-tab-pane label="操作记录" name="4">
                        <el-timeline style="margin-top:20px;max-height:600px;overflow: auto;padding:10px">
                            <el-timeline-item
                                    v-for="(activity, index) in activities"
                                    :key="index"
                                    :timestamp="activity.createdAt">
                                <div style=""><span style="font-weight: bold;padding-right:10px">{{activity.operateUserName}}</span> <span>{{activity.operateContent}}</span></div>
                            </el-timeline-item>
                        </el-timeline>
                    </el-tab-pane>
                    <el-tab-pane label="合同记录" name="5">
                        <el-table
                                v-loading="orderListLoading"
                                :data="orderPageList"
                                border
                                style="width: 100%; margin-top: 20px">
                            <el-table-column
                                    min-width="120"
                                    prop="createTime"
                                    label="订单日期"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    min-width="250"
                                    prop="orderSn"
                                    label="订单号"
                                    align="center">
                                <template slot-scope="scope">
                                    <div>
                                      {{scope.row.orderSn}}
                                      <img src="../../assets/images/moresu.png" style="vertical-align: middle;" v-if="scope.row.moresuSn != ''"/>
                                      <img src="../../assets/images/zhuofei2.png" v-if="scope.row.orderState == 10" style="vertical-align: middle;"/>
                                      <img src="../../assets/images/bian.png" v-if="scope.row.isRestart" style="vertical-align: middle;"/>
                                      <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>
                                      <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>
                                      <img src="../../assets/images/ya.png" v-if="scope.row.isEnableYunLink == 1"  style="vertical-align: middle;"/>
                                      <img src="https://pic.moresu.com/FgZkvAbP27TK55QAyRIOU3t0mmoC" v-if="scope.row.isHasCostOrder == 1"  style="vertical-align: middle;"/>
                                      <img src="https://pic.moresu.com/FhIaQcrC8Mbtqn9EmG4uteNBibd7" v-if="scope.row.activityType == 'paiMai'"  style="vertical-align: middle;width:16px;"/>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                              prop="userName"
                              label="业务员"
                              align="center">
                            </el-table-column>
                            <el-table-column
                              min-width="200"
                              label="客户名称"
                              align="center">
                                <template slot-scope="scope">
                                  <span>{{scope.row.customerNumber }}</span>
                                  <!--是否有权限-->
                                  <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    class-name="cspantd"
                                    width="200"
                                    label="合同商品"
                                    align="center">
                                <template slot-scope="scope">
                                    <div class="tdDiv" v-for="(item,index) in scope.row.goodsName" :key="index">{{item}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="orderGoodsNumber"
                                    label="合同数量"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    min-width="200"
                                    prop="addressInfo"
                                    label="收货地址"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="orderAmount"
                                    label="合同金额"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="orderStateStr"
                                    label="订单状态"
                                    align="center">
                            </el-table-column>

                            <el-table-column
                                    label="操作"
                                    fixed="right"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-button
                                            v-if="newCustomersInfo.isMy == 1"
                                            @click="toOrderDetail(scope.row)"
                                            type="text"
                                            size="mini">查看
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination-container">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChangeOrder"
                                    @current-change="handleCurrentChangeOrder"
                                    layout="total, sizes,prev, pager, next,jumper"
                                    :current-page.sync="orderParams.pageNum"
                                    :page-size="orderParams.pageSize"
                                    :page-sizes="[10,15,20]"
                                    :total="orderCount">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="历史合同" name="9">
                        <el-table
                                v-loading="oldorderListLoading"
                                :data="oldorderPageList"
                                border
                                style="width: 100%; margin-top: 20px">
                            <el-table-column
                                    prop="createDate"
                                    label="订单日期"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="orderSn"
                                    label="订单号"
                                    align="center">
                                <template slot-scope="scope">
                                    <div style="white-space:nowrap;">{{scope.row.orderSn}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    class-name="cspantd"
                                    width="200"
                                    label="合同商品"
                                    align="center">
                                <template slot-scope="scope">
                                    {{scope.row.goodsName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="goodsNum"
                                    label="合同数量"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="goodsAmount"
                                    label="合同金额"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="业务员"
                                    align="center">
                            </el-table-column>
                        </el-table>
                        <div class="pagination-container">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChangeOrderold"
                                    @current-change="handleCurrentChangeOrderold"
                                    layout="total, sizes,prev, pager, next,jumper"
                                    :current-page.sync="oldorderParams.pageNum"
                                    :page-size="oldorderParams.pageSize"
                                    :page-sizes="[10,15,20]"
                                    :total="oldorderCount">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="客诉记录" name="10">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="addAfter()">新增客诉
                      </el-button>
                      <el-menu :default-active="afterQuery.applyType" class="el-menu-demo" mode="horizontal" @select="afterSelect">
                        <el-menu-item index="诉求">诉求</el-menu-item>
                        <el-menu-item index="售后">售后</el-menu-item>
                      </el-menu>
                      <!--数据列表-->
                      <div class="table-container">
                        <el-table
                          :header-cell-style="{ textAlign: 'center' }"
                          v-loading="afterLoading"
                          :data="afterList"
                          border
                          style="width: 100%; margin-top: 20px">
                          <el-table-column
                            :label="afterQuery.applyType == '诉求' ? '诉求类型' : '售后类型'"
                            min-width="100"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.applyReason}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="申请编号"
                            min-width="150"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.applySn}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="关联订单"
                            min-width="150"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.orderSn}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            :label="afterQuery.applyType == '诉求' ? '诉求内容' : '售后内容'"
                            min-width="200"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.applyRemark}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            :key="10"
                            v-if="afterQuery.applyType == '售后'"
                            label="关联金额"
                            min-width="100"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.relationAmount}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            :key="11"
                            v-if="afterQuery.applyType == '售后'"
                            label="责任归属"
                            min-width="100"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.dutyParty}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="处理方案"
                            min-width="200"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.handleType}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="补偿金额"
                            min-width="100"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.payAmount}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="紧急程度"
                            min-width="100"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.urgencyType}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="附件"
                            min-width="200"
                            align="center">
                            <template slot-scope="scope">
                              <el-link v-for="item in scope.row.applyFiles" type="primary" :href="item" target="_blank" :key="item">{{item}}</el-link>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="创建时间"
                            min-width="150"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.applyTime}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="提报人"
                            min-width="100"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.applyUserName}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            v-if="afterQuery.applyType == '售后'"
                            label="审批状态"
                            min-width="150"
                            align="center">
                            <template slot-scope="scope">
                              {{scope.row.applyStateStr}}
                            </template>
                          </el-table-column>

                        </el-table>
                      </div>
                      <div class="pagination-container">
                        <el-pagination
                          background
                          @size-change="afterSizeChange"
                          @current-change="afterCurrentChange"
                          layout="total, sizes,prev, pager, next,jumper"
                          :current-page.sync="afterQuery.pageNum"
                          :page-size="afterQuery.pageSize"
                          :page-sizes="[10,15,20]"
                          :total="aftercount">
                        </el-pagination>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="客户标签" name="13">
                    <el-button
                      v-if="newCustomersInfo.isMy==1"
                      type="primary"
                      size="mini"
                      @click="showSetLabel()">设置标签
                    </el-button>
                    <!--数据列表-->
                    <div class="table-container">
                      <el-table
                        :header-cell-style="{ textAlign: 'center' }"
                        v-loading="labelLoading"
                        :data="labelList"
                        border
                        style="width: 100%; margin-top: 20px">
                        <el-table-column
                          label="标签分类"
                          min-width="100"
                          align="center">
                          <template slot-scope="scope">
                            {{scope.row.tagClass}}
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="标签名称"
                          min-width="150"
                          align="center">
                          <template slot-scope="scope">
                            {{scope.row.tagName}}
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="标记时间"
                          min-width="150"
                          align="center">
                          <template slot-scope="scope">
                            {{scope.row.tagTime}}
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="失效时间"
                          min-width="150"
                          align="center">
                          <template slot-scope="scope">
                            {{scope.row.invalidTime}}
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="标记人"
                          min-width="100"
                          align="center">
                          <template slot-scope="scope">
                            {{scope.row.tagUserName}}
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>

                  </el-tab-pane>
                </el-tabs>
            </div>
      </div>
    </el-card>

    <!--图片放大-->
    <el-dialog
            :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="600px">
        <div style="max-height: 500px;overflow: auto">
          <img :src="imgSrc" style="width:100%;"/>
        </div>
    </el-dialog>


      <!--分类订单列表-->
      <el-dialog
              title="合同明细"
              :visible.sync="dialogVisible16"
              width="800px">
          <div style="overflow: hidden">
              <el-table
                      v-loading="orderDialogListLoading"
                      :data="orderDialogList"
                      border
                      style="width: 100%; margin-top: 20px">
                  <el-table-column
                          prop="orderSn"
                          label="合同号"
                          align="center">
                      <template slot-scope="scope">
                          <div style="white-space:nowrap;">{{scope.row.orderSn}}</div>
                      </template>
                  </el-table-column>
                  <el-table-column
                          prop="orderSn"
                          label="合同时间"
                          align="center">
                      <template slot-scope="scope">
                          <div style="white-space:nowrap;">{{scope.row.createTime}}</div>
                      </template>
                  </el-table-column>
                  <el-table-column
                          prop="orderSn"
                          label="合同商品"
                          align="center">
                      <template slot-scope="scope">
                          <div>{{scope.row.goodsSn}}</div>
                      </template>
                  </el-table-column>
                  <el-table-column
                          prop="goodsNum"
                          label="合同数量"
                          align="center">
                  </el-table-column>
                  <el-table-column
                          prop="goodsPrice"
                          label="合同单价"
                          align="center">
                  </el-table-column>
                  <el-table-column
                          prop="goodsAmount"
                          label="合同金额"
                          align="center">
                  </el-table-column>
                  <el-table-column
                          prop="orderState"
                          label="合同状态"
                          align="center">
                  </el-table-column>
              </el-table>
              <div class="pagination-container">
                  <el-pagination
                          background
                          @size-change="handleSizeChangeOrder2"
                          @current-change="handleCurrentChangeOrder2"
                          layout="total, sizes,prev, pager, next,jumper"
                          :current-page.sync="orderParams2.pageNum"
                          :page-size="orderParams2.pageSize"
                          :page-sizes="[10,15,20]"
                          :total="orderCount2">
                  </el-pagination>
              </div>
          </div>
      </el-dialog>

     <!-- <addGj ref="addGj" @getList="getTrackingListData"></addGj> -->
     <addFj ref="addFj" @update="getPageInfo"></addFj>
     <!-- 转移 -->
     <cmsTransfer ref='cmsTransfer' @update="getPageInfo"></cmsTransfer>
     <!-- 还原 -->
     <delayCms ref='delayCms' @update="getPageInfo"></delayCms>
     <!-- 新增产品 -->
     <addUseGoods ref="addUseGoods" @update="getMaterialList"></addUseGoods>
     <!-- 新增联系人 -->
     <addContacts ref="addContacts" @update="getPageContactListData"></addContacts>
     <!-- 新增子客户 -->
     <addSonCustomer ref="addSonCustomer" @update="getPageInfo"></addSonCustomer>

    <!-- 发布工单 -->
    <addWorkOrder ref="addWorkOrder"></addWorkOrder>

    <!-- 管理跟进 -->
    <addManageFms ref="addManageFms" @submit="getManageTrackingList"></addManageFms>

    <!-- 新增售后 -->
    <addSh ref="addSh" @getList="getAfterList"></addSh>

    <!--设置标签-->
    <setLabel ref="setLabel" @getList="getLabelList"></setLabel>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { formatDate } from '@/utils/date';
import { validatePhone } from '@/utils/validate';
import store from '@/store';
import { getStaffsList } from '@/api/management';
import {useGoodsList} from '@/api/company.js'
import cmsTransfer from './components/cmsTransfer.vue';
import delayCms from './components/delayCms.vue';
import addUseGoods from '@/views/fms/components/addUseGoods.vue';
import addContacts from './components/addContacts.vue';
import addSonCustomer from './components/addSonCustomer.vue'
import addSh from '@/views/sale/components/addSh'
import setLabel from './components/setLabel'
import {delContactInfo } from '@/api/partner';
// import addGj from '@/views/sale/components/addGj';
import addFj from '@/views/sale/components/addFj';
import addWorkOrder from '@/views/components/addWorkOrder';
import {
  getCustomerDetailAPI,
  manageTrackingList,editCustomerInfo
} from '@/api/fms.js';
import {
  getCustomersInfo,
  getTrackingList,
  getGoodsList,
  getQiniuToken,
  getLogList,
  getAddressList,
  saleOrderList,
  customerBuyCount,
  customerBuyRate,
  customerProfit,
  customerBuyGoods,
  profitSummary,
  ajaxGoodsLineList,
  getClassOrderList,
  oldOrderGoods,
  getAgreementList,
  addAgreement,
  delAgreement,
  checkContactMobile,
} from '@/api/partner';
import {
  updateParent,
  callCustomerMobileAPI,
  afterSaleList
} from '@/api/company';
import { lastTracking } from '@/api/product';
import axios from "axios";

import { customerNewContactList ,customerTagList} from '@/api/company';
import addManageFms from "../fms/components/addManageFms";
const defaultContactForm = {
  customerId: '',
  customerName: '',
  contactName: '',
  contactMobile: '',
  contactDuty: '',
  contactHobby: '',
  contactFocus: '',
  contactAddress: '',
  contactSex: '',
  contactEmail: '',
  contactBirthday: null,
  isMainContact: '',
  remark: '',
  isBuyPermission: '',
};
const defaultFmslistQueryListQuery = {
  "customerId" : '', //客户ID
  "saleUserId" : [], //业务员
  "customerNewType" : "", //客户分类
  "customerQuality" : '', //客户性质
  "customerNature" : "", //规模性质
  "trackingUserId" : '', //跟进人
  "trackingTime" : [],//跟进时间
  "trackingContent" : "",//跟进内容
  "trackingMethod" : "", //跟进方式
  "pageNum" : 1,
  "pageSize" : 10,
  "isExport" : '' //是否导出
};

const defaultAfterQuery={
  "tab" : "all",
  "customerId" : '',
  "applyTime" : [],
  "applyUserId" : '',
  "applyType":"诉求",
  "applyReason" : "",
  "urgencyType" : "",
  "applyState" : "",
  "orderSn" : "",
  "pageNum" : 1,
  "pageSize" : 10
};

const defaultLabelQuery={
  "customerId" : '',
};

export default {
  name: "customerDetail",
  data() {
    const isvalidatePhone = (rule, value, callback) => {
      if (!validatePhone(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    };
    return {
      roles: store.getters.roles ? store.getters.roles : [],
      loading: false,
      activeName: this.$route.query.tab ? this.$route.query.tab : '1',
      tableData: [],
      customerId: this.$route.query.id,
      // customersInfo: {},
      btnLoading:false,
      newCustomersInfo: {},
      trackingParams: {
        type: 'all',
        pageNum: 1,
        pageSize: 10,
        customerId: this.$route.query.id,
      },
      contactParams: {
        pageNum: 1,
        pageSize: 10,
        customerId: this.$route.query.id,
        isMy: 1,
      },
      trackingList: [],
      trackingCount: 0,
      trackingLoading: false,
      dialogVisible: false,
      imgSrc: '',
      contactPageList: [],
      contactCount: 0,
      contactLoading: false,
      // dialogVisible3: false,
      isShowMore: true,
      title3: '',
      btnLoading3: false,
      contactForm: JSON.parse(JSON.stringify(defaultContactForm)),
      rules3: {
        contactName: [{ required: true, message: '请填写联系人姓名', trigger: 'blur' },],
        contactMobile: [{ required: true, trigger: 'blur', validator: isvalidatePhone },],
        contactDuty: [{ required: true, message: '请填写联系人职务', trigger: 'blur' },],
      },
      materialParams: {
        tab: 'all',
        customerId: this.$route.query.id,
      },
      materialList: [],
      materialCount: 0,
      materialLoading: false,
      title4: '',
      rules4: {
        customerId: [{ required: true, message: '请选择客户', trigger: 'change' },],
        categoryId: [{ required: true, message: '请选择使用材料', trigger: 'change' },],
      },
      categoriesList: [],
      bandList: [],
      activeTabName: 'name0',
      visible: false,
      visible2: false,
      brandType: 1,
      goodsSnType: 1,
      activities: [],
      uploadToken: {
        token: '',
      },
      imgDomain: '',
      diQuIds: [],
      options: [],
      isMy: false,
      materialDialogType: '',
      contactType: '',
      isBuyPermission: -1,
      categoriesloading: false,
      brandLoading: false,
      orderPageList: [],
      orderParams: {
        pageNum: 1,
        pageSize: 10,
        customerId: this.$route.query.id,
        isRelation: 1,
        tab: '',
      },
      orderCount: 0,
      orderListLoading: false,
      oldorderPageList: [],
      oldorderParams: {
        pageNum: 1,
        pageSize: 10,
        customerId: this.$route.query.id,
      },
      oldorderCount: 0,
      oldorderListLoading: false,
      activeName2: '1',
      radio2: '采购频率',
      chartW: 0,
      years: [],
      year2: '',
      radio3: '总量',
      year3: '',
      radio4: '总量',
      year4: '',
      goodsList: ['总量', 'PA6', 'PA66', 'ABS', 'PC', 'CPL', '玻纤'],
      buyCount: [],
      x2: [],
      orderY: [],
      goodsY: [],
      loadingChart2: false,
      perMonthOrderNum: '--',
      perMonthGoodsNum: '--',
      loadingChart3: false,
      loadingChart4: false,
      statistics: {},
      gongXianCount: {},
      btnLoading9: false,
      productLineList: [],
      productLineListLoading: false,
      goodsLineList: [],
      list2: [],
      btnLoading10: false,
      delForm: {
        remark: ''
      },
      rules10: {
        remark: [{ required: true, message: '请输入删除理由', trigger: 'blur' },],
      },
      quitForm: {
        target: 0,
        remark: ''
      },
      dialogVisible16: false,
      orderDialogListLoading: false,
      orderDialogList: [],
      orderCount2: 0,
      orderParams2: {
        pageNum: 1,
        pageSize: 10,
        customerId: this.$route.query.id,
        goodsName: ''
      },
      customersAgreementList: [],
      list17: [],
      params17: {
        pageNum: 1,
        pageSize: 10,
        customerId: this.$route.query.id,
      },
      count17: 0,
      teiJianActiveName: 'first',
      remoteMethodLoading: false,
      options17: [],
      userOptionList: [],
      loading2: false,
      goodsName: '',
      btnLoadingLD: false,
      developStep: '',
      isAdd: false,
      fmslistQuery:JSON.parse(JSON.stringify(defaultFmslistQueryListQuery)),
      manageFmsList : [],
      manageFmsCount:0,
      manageFmsLoading:false,

      afterLoading :false,
      afterList:[],
      afterQuery:JSON.parse(JSON.stringify(defaultAfterQuery)),
      aftercount:0,


      labelList:[],
      labelLoading:false,
      labelQuery:JSON.parse(JSON.stringify(defaultLabelQuery)),

    }
  },
  components: {
    cmsTransfer,
    delayCms,
    addUseGoods,
    addContacts,
    addSonCustomer,
    // addGj,
    addFj,
    addWorkOrder,
    addManageFms,
    addSh,
    setLabel
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    delCustomerContact(){
      if(this.roles.indexOf("delCustomerContact") != -1){
        return true
      }else{
        return false
      }
    },
    addSaleWorkOrder(){
      if(this.roles.indexOf("addSaleWorkOrder") != -1){
        return true
      }else{
        return false
      }
    },
  },
  created() {
    this.getPageInfo();
    this.getdevelopStep();
    this.getPageContactListData();
    this.getMaterialList();
    this.getUploadToken();
    this.getAddressListData();
    this.getOrderList();
    this.getCustomerBuyCount();
    let myDate = new Date();
    let tYear = myDate.getFullYear();
    for (let i = 2018; i <= tYear; i++) {
      this.years.push(i)
    }
    this.getGoodsLineList();
    this.getOrderListold();
    this.getCustomersAgreementList();
    this.fmslistQuery.customerId = this.$route.query.id
    this.getManageTrackingList()
    this.afterQuery.customerId = this.$route.query.id
    this.getAfterList();

    this.labelQuery.customerId = this.$route.query.id
    this.getLabelList();
  },
  filters: {
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd')
    },
  },
  methods: {
    changeFocusOn(){
      editCustomerInfo({customerId:this.newCustomersInfo.customerId,isFocusOn:this.newCustomersInfo.isFocusOn == 1 ? 0 :1}).then((res)=>{
        this.$message.success('操作成功！')
        this.getPageInfo()
      })
    },
    editCode(){
      let text = '是否将客户'+this.newCustomersInfo.customerName+'的信用码修改为'+this.newCustomersInfo.businessCode+'_1?此修改仅在客户【新建客户】的方式变更抬头时使用，变更后可通过新增修改后抬头的客户!'
      this.$confirm(text, '信用码修改确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        editCustomerInfo({customerId:this.newCustomersInfo.customerId,isChangeBusinessCode:1}).then(()=>{
          this.getPageInfo()
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    showSetLabel(){
      this.$refs.setLabel.showPop(this.$route.query.id)
    },
    //获取客户标签列表
    getLabelList() {
      this.labelLoading  = true;
      let pa = JSON.parse(JSON.stringify(this.labelQuery))
      customerTagList(pa).then(response => {
        this.labelList = response;
        this.labelLoading  = false;
      }).catch(()=>{
        this.labelLoading  = false;
      });
    },


    afterSelect(key, keyPath) {
      this.afterQuery.applyType = key
      this.afterQuery.pageNum = 1;
      this.getAfterList();
    },
    afterSizeChange(val){
      this.afterQuery.pageNum = 1;
      this.afterQuery.pageSize = val;
      this.getAfterList();
    },
    afterCurrentChange(val){
      this.afterQuery.pageNum = val;
      this.getAfterList();
    },


    //获取客诉列表
    getAfterList() {
      this.afterLoading  = true;
      let pa = JSON.parse(JSON.stringify(this.afterQuery))
      afterSaleList(pa).then(response => {
        this.afterList = response.list;
        this.aftercount = response.count;
        this.afterLoading  = false;
      }).catch(()=>{
        this.afterLoading  = false;
      });
    },
    //增加客诉
    addAfter(){
      let data = {
        customerId:this.newCustomersInfo.customerId,
        customerName:this.newCustomersInfo.customerName
      }
      this.$refs.addSh.showPop(data)
    },
    //管理跟进
    manageFms(){
      this.$refs.addManageFms.showDetail(this.newCustomersInfo)
    },
    handleSizeChangeManageFms(val) {
      this.fmslistQuery.pageNum = 1;
      this.fmslistQuery.pageSize = val;
      this.getManageTrackingList();
    },
    handleCurrentChangeManageFms(val) {
      this.fmslistQuery.pageNum = val;
      this.getManageTrackingList();
    },
    //获取管理跟进
    getManageTrackingList() {
      manageTrackingList(this.fmslistQuery).then((res)=>{
        this.manageFmsList = res.list;
        this.manageFmsCount = res.count;
        this.manageFmsLoading = false;
      }).catch(()=>{
        this.manageFmsLoading = false;
      })
    },
    //提交工单
    workOrder(){
        this.$refs.addWorkOrder.showPop('customerId',this.newCustomersInfo.customerId,this.newCustomersInfo.customerName,this.newCustomersInfo.userName)
    },
    //删除联系人
    delContact(item){
      this.$confirm('确定删除该联系人?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delContactInfo({contactId:item.contactId}).then(()=>{
          this.getPageContactListData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 新增子客户
    showSonCustomer(type,item) {
      if (type == 'add') {
        this.$refs.addSonCustomer.showPop(type,item)
      }
    },
    //新增编辑联系人
    showContact(type, item) {
      if (type == 'add') {
        this.$refs.addContacts.showPop(type, this.newCustomersInfo);
      } else if (type == 'edit') {
        const newCustomersInfo2 = JSON.parse(JSON.stringify(item));
        newCustomersInfo2['customerId'] = this.newCustomersInfo.customerId;
        newCustomersInfo2['customerName'] = this.newCustomersInfo.customerName;
        this.$refs.addContacts.showPop(type, newCustomersInfo2);
      }
    },
    //新增编辑产品
    addProduct() {
      this.$refs.addUseGoods.showPop(this.newCustomersInfo.customerId);
    },
    //还原客户
    delayCustomer(){
      this.$refs.delayCms.showPop(this.newCustomersInfo);
    },
    //显示转移弹窗
    showQuit() {
      this.$refs.cmsTransfer.showPop(this.newCustomersInfo.customerId,'one',this.newCustomersInfo.isCharge);
    },
    //获取客户详情
    getPageInfo() {
      this.loading = true;
      // getCustomersInfo({ customerId: this.customerId }).then(res => {
      //   this.customersInfo = res;
      //   this.isMy = this.customersInfo.charge.userId == this.userId && this.customersInfo.isBlackList == 0;
      // });
      getCustomerDetailAPI({ customerId: this.customerId }).then((newInfo) => {
        this.loading = false;
        this.newCustomersInfo = newInfo;
      }).catch((error) => {
        this.loading = false;
      })
      this.getTrackingListData();
      setTimeout(() => {
        this.chartW = $("#right-div").width();
      }, 300)
    },
    // 电话联系
    callMobile(item) {
      callCustomerMobileAPI({
        contactId: item.contactId
      }).then((res) => {
        console.log(res);
      })
    },
    showfj(type, type2) {
      this.$refs.addFj.showfj(type, type2, this.newCustomersInfo.parentId, this.newCustomersInfo.parentName, this.newCustomersInfo.sonCustomer, this.customerId)
    },
    //清除父级
    delfj() {
      this.$confirm('是否确认解绑主客户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {};
        data.customerId = this.customerId;
        data.type = 2
        updateParent(data).then(() => {
          this.getPageInfo();
        }).catch(() => {
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },



    //获取客户开发等级
    getdevelopStep() {
      lastTracking({ customerId: this.customerId }).then((res) => {
        this.developStep = res.developStep != 0 ? res.developStep : ''
      })
    },
    //查询手机号是否存在
    seachRepeat() {
      if (validatePhone(this.contactForm.contactMobile) && this.contactForm.customerId != '') {
        checkContactMobile({ contactMobile: this.contactForm.contactMobile, customerId: this.contactForm.customerId }).then((res) => {
        }).catch((rej) => {
          if (rej.code == 10000 || rej.code == 10001) {
            this.$message.error(rej.msg);
            this.contactForm.contactMobile = '';
          }
        })
      }
    },

    // 图片加载出错显示加载出错图
    slnotimg(event) {
      var img = event.srcElement
      img.src = 'https://clientfile.56zly.com/FoPof4NDoMSJISMJYtnUaHrOZjyK'
      img.onerror = null
    },
    beforeAvatarUpload(file) {
      const isIMG = (/^image\/(jpg|jpeg|png)$/.test(file.type) || /^application\/(pdf)$/.test(file.type))
      if (!isIMG) {
        this.$confirm('上传图片暂时只支持JPG,PNG,PDF格式', '提示', {
          confirmButtonText: '知道了',
          showCancelButton: false,
          type: 'error'
        })
      }
      if (isIMG) {
        const suffix = file.name
        const timestamp = new Date().getTime()
        const key = timestamp + `${suffix}`
        this.uploadToken.key = key
        return this.uploadToken
      } else {
        return isIMG
      }
    },

    //获取质量协议列表
    getCustomersAgreementList() {
      getAgreementList({ customerId: this.customerId }).then((res) => {
        this.customersAgreementList = res;
      })
    },
    //上传质量协议图片
    handleAvatarSuccess2(res) {
      // console.log("res",res);
      let url = this.imgDomain + res.key;
      addAgreement({ customerId: this.customerId, picUrl: url }).then((res) => {
        this.getCustomersAgreementList();
        this.$message({
          type: 'success',
          message: '上传成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      })

    },

    //删除图片
    delImg2(id) {
      delAgreement({ customerId: this.customerId, picId: id }).then(() => {
        this.getCustomersAgreementList();
        this.$message({
          type: 'success',
          message: '已删除!'
        });
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '删除失败!'
        });
      })
    },

    //获取历史合同列表
    getOrderListold() {
      this.oldorderListLoading = true;
      oldOrderGoods(this.oldorderParams).then(response => {
        this.oldorderPageList = response.list;
        this.oldorderCount = response.count;
        this.oldorderListLoading = false;
      }).catch(() => {
        this.oldorderListLoading = false;
      });
    },
    handleSizeChangeOrderold(val) {
      this.oldorderParams.pageNum = 1;
      this.oldorderParams.pageSize = val;
      this.getOrderListold();
    },
    handleCurrentChangeOrderold(val) {
      this.oldorderParams.pageNum = val;
      this.getOrderListold();
    },

    //显示订单弹窗
    showOrderList(goodsName) {
      this.dialogVisible16 = true;
      this.orderParams2.pageNum = 1;
      this.orderParams2.goodsName = goodsName;
      this.getOrderList2();
    },

    //获取合同列表
    getOrderList2() {
      this.orderDialogListLoading = true;
      getClassOrderList(this.orderParams2).then(response => {
        this.orderDialogList = response.list;
        this.orderCount2 = response.count;
        this.orderDialogListLoading = false;
      }).catch(() => {
        this.orderDialogListLoading = false;
      });
    },
    handleSizeChangeOrder2(val) {
      this.orderParams2.pageNum = 1;
      this.orderParams2.pageSize = val;
      this.getOrderList2();
    },
    handleCurrentChangeOrder2(val) {
      this.orderParams.pageNum = val;
      this.getOrderList2();
    },
    //去客户详情页
    toCustomerInfo(customerId) {
      let routeData = this.$router.resolve({ name: 'customerDetail', query: { id: customerId } });
      window.open(routeData.href);
    },
    //获取产品线
    getGoodsLineList() {
      ajaxGoodsLineList({ customerId: this.$route.query.id }).then((res) => {
        this.goodsLineList = res;
      })
    },
    //去销售合同列表-我的
    toSaleList(type) {
      this.$router.push({ name: 'sale', query: { type: type, keywords: this.newCustomersInfo.customerName } })
    },
    //获取统计数据
    getprofitSummary() {
      profitSummary({ customerId: this.$route.query.id }).then((res) => {
        this.gongXianCount = res;
      })
    },
    //商品统计数量
    getCustomerBuyCount() {
      customerBuyCount({ customerId: this.$route.query.id }).then((res) => {
        this.buyCount = res.buyNumStatistics;
        this.statistics = res.orderStatistics
      })
    },
    //获取忠诚度数据
    getCustomerBuyRate() {
      this.loadingChart2 = true;
      customerBuyRate({ customerId: this.$route.query.id, year: this.year2 }).then((res) => {
        this.x2 = [];
        this.orderY = [];
        this.goodsY = [];
        res.list.forEach((el) => {
          this.x2.push(el.createMonth);
          this.orderY.push(el.orderNum);
          this.goodsY.push(el.goodsNum);
        });
        let y = this.radio2 == '采购频率' ? this.orderY : this.goodsY;
        this.loadingChart2 = false;
        this.perMonthOrderNum = res.perMonthOrderNum;
        this.perMonthGoodsNum = res.perMonthGoodsNum;
        this.drawCaiGouCount(this.x2, y);
      }).catch(() => {
        this.loadingChart2 = false;
      })
    },
    //获取客户的贡献
    getCustomerProfit() {
      this.loadingChart3 = true;
      customerProfit({ customerId: this.$route.query.id, year: this.year3, goodsName: this.radio3 }).then((res) => {
        this.loadingChart3 = false;
        let x = []; let y = [];
        res.forEach((el) => {
          x.push(el.deliverMonth);
          y.push(el.profit);
        });
        this.drawGongXian(x, y);
      }).catch(() => {
        this.loadingChart3 = false;
      })
    },

    //商品分析
    getcustomerBuyGoods() {
      this.loadingChart4 = true;
      customerBuyGoods({ customerId: this.$route.query.id, year: this.year4, goodsName: this.radio4 }).then((res) => {
        this.loadingChart4 = false;
        let x = []; let y = [];
        res.forEach((el) => {
          x.push(el.deliverMonth);
          y.push(el.shipNum);
        });
        this.drawGoods(x, y);
      }).catch(() => {
        this.loadingChart4 = false;
      })
    },
    //画月均采购次数
    drawCaiGouCount(x, y) {
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let max;
      let min;
      let interval;
      if (this.radio2 == '采购频率') {
        max = 10;
        min = 0;
        interval = 2;
      }

      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: x,
        },
        yAxis: {
          type: 'value',
          min: min,
          max: max,
          interval: interval,
        },
        series: [{
          type: 'line',
          smooth: true,
          data: y,
          name: '月均采购次数',
        }]
      });
      // myChart.on('click',function(params){
      //     console.log(params);
      // });
    },
    //画贡献率
    drawGongXian(x, y) {
      let myChart = this.$echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: x,
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          type: 'line',
          smooth: true,
          data: y,
          name: '毛利',
        }]
      });
    },

    //画商品分析
    drawGoods(x, y) {
      let myChart = this.$echarts.init(document.getElementById('myChart4'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: x,
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          type: 'line',
          smooth: true,
          data: y,
          name: '采购数量',
        }]
      });
    },
    //切换客户分析tab
    changeActiveName2(tab) {
      if (tab.name == 1) {
        this.getCustomerBuyCount();
      } else if (tab.name == 2) {
        this.getCustomerBuyRate();
      } else if (tab.name == 3) {
        this.getprofitSummary();
        this.getCustomerProfit();
      } else if (tab.name == 4) {
        this.getcustomerBuyGoods()
      }

    },

    //获取合同列表
    getOrderList() {
      this.orderListLoading = true;
      saleOrderList(this.orderParams).then(response => {
        this.orderPageList = response.list;
        this.orderCount = response.count;
        this.orderListLoading = false;
      }).catch(() => {
        this.orderListLoading = false;
      });
    },
    handleSizeChangeOrder(val) {
      this.orderParams.pageNum = 1;
      this.orderParams.pageSize = val;
      this.getOrderList();
    },
    handleCurrentChangeOrder(val) {
      this.orderParams.pageNum = val;
      this.getOrderList();
    },

    //去合同详情页
    toOrderDetail(item) {
      let routeData = this.$router.resolve({ name: 'saleDetail', query: { id: item.orderId, type: 'see' } });
      window.open(routeData.href);
    },

    //返回
    // toBalck() {
    //   this.$router.go(-1);
    // },
    //去编辑客户页
    toAddCustomer() {
      this.$router.push({name:'addCustomer',query:{customerId:this.customerId,type:'edit'}})
    },

    //获取省市区列表
    getAddressListData() {
      getAddressList().then((res) => {
        this.options = res;
      })
    },
    //切换查看
    changeActiveName() {
      if (this.activeName == '4') {
        this.getLogListData()
      }
    },
    //获取操作记录
    getLogListData() {
      getLogList({ customerId: this.customerId }).then((res) => {
        this.activities = res.list
      })
    },
    //获取客户使用材料
    getMaterialList() {
      this.materialLoading = true;
      this.btnLoading = true;
      useGoodsList(this.materialParams).then((res) => {
        this.materialList = res.list;
        // this.materialCount = res.count;
        this.materialLoading = false;
        this.btnLoading = false;
      });
    },
    handleSizeChangeMaterial(val) {
      this.materialParams.pageNum = 1;
      this.materialParams.pageSize = val;
      this.getMaterialList();
    },
    handleCurrentChangeMaterial(val) {
      this.materialParams.pageNum = val;
      this.getMaterialList();
    },
    //获取客户跟进记录
    getTrackingListData() {
      this.trackingLoading = true;
      getTrackingList(this.trackingParams).then((res) => {
        this.trackingList = res.list;
        this.trackingCount = res.count;
        this.trackingLoading = false;
        this.isAdd = res.isAdd
      }).catch(() => {
        this.trackingLoading = false;
      })
    },

    handleSizeChangeTracking(val) {
      this.trackingParams.pageNum = 1;
      this.trackingParams.pageSize = val;
      this.getTrackingListData();
    },

    handleCurrentChangeTracking(val) {
      this.trackingParams.pageNum = val;
      this.getTrackingListData();
    },

    //放大图片
    showBigImg(src) {
      if (src.indexOf(".pdf") == -1) {
        this.dialogVisible = true;
        this.imgSrc = src;
      } else {
        window.open(src)
      }

    },
    //获取七牛TOKEN
    getUploadToken() {
      getQiniuToken().then((res) => {
        this.uploadToken.token = res.token;
        this.imgDomain = res.domain
      })
    },

    //获取页面联系人列表
    getPageContactListData() {
      this.contactLoading = true;
      customerNewContactList(this.contactParams).then((res) => {
        this.contactPageList = res.list;
        this.contactCount = res.count;
        this.contactLoading = false;
      }).catch(() => {
        this.contactLoading = false;
      })
    },

    handleSizeChangeContact(val) {
      this.contactParams.pageNum = 1;
      this.contactParams.pageSize = val;
      this.getPageContactListData();
    },
    handleCurrentChangeContact(val) {
      this.contactParams.pageNum = val;
      this.getPageContactListData();
    },
  }
};

</script>

<style  lang="scss">
.custom-table{
  width: 100%;
  font-size: 12px;
  border-bottom:1px solid #EBEEF5;
  border-left:1px solid #EBEEF5;
  td{
    border-top:1px solid #EBEEF5;
    border-right:1px solid #EBEEF5;
    line-height: 18px;
    padding:5px 10px;
  }
}
    .cspantd{
        padding:0 !important;
        .cell{
            padding:0 !important;
            .tdDiv{
                padding:5px 10px;
                min-height: 20px;
                line-height: 20px;
                box-sizing: content-box;
            }
        }
    }
  .detail-container {
    width: 90%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
    .el-card__header{
      background: #f8f8f8;
      .kehu-name{
        display: inline-block;
        font-size:14px;
        vertical-align: middle;
      }
      .kehu-label{
        font-size:12px;
        vertical-align: middle;
        display: inline-block;
        margin-left:15px;
        color: #409eff;
        background: #ecf5ff;
        border: 1px solid #b3d8ff;
        height:24px;
        line-height: 24px;
        padding:0 10px;
        border-radius: 5px;
      }
      .kehu-info{
        text-align: right;
        font-size: 12px;
        color:#333;
        line-height: 20px;
        span{
          padding-left:16px;
        }
        .el-button span{
            padding-left:0px
        }
      }
    }
    .kehu-info-left{
      line-height: 24px;
      font-size:14px;
      color:#333;
      .left-item{
        min-height: 22px;
        padding-left:90px;
        padding-right:20px;
        position: relative;
        margin-bottom:10px;
        word-break:break-all;
        span{
          position: absolute;
          display: inline-block;
          width:90px;
          left:0;
          top:0;
          line-height: 22px;
          text-align: left;
        }
      }
    }
    .genjin-list{
        .genjin-item{
            margin-top:30px;
            padding-bottom:20px;
            border-bottom:1px solid #eee;
            .genjin-top{
              font-size: 14px;
              color:#888;
              .right-btn{
                float: right;
                text-align: right;
              }
            }
            .genjin-con{
              margin-top:15px;
              font-size: 14px;
              color:#333;
              line-height: 20px;
            }
            .genjin-bottom{
              margin-top:15px;
              img{
                width:80px;
                height:80px;
                object-fit: contain;
                margin-bottom:10px;
                margin-right:10px;
              }
            }
        }
    }
    .avatar-uploader{
      margin-bottom:10px;
      display: inline-block;
      width:80px;
      height:80px;
      border:1px solid #DCDFE6;
      text-align: center;
      line-height: 80px;
      vertical-align: middle;
    }
  }
  .category-pane{
    max-height: 250px;
    overflow: auto;
    .pane-item{
      display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox; /* TWEENER - IE 10 */
      display: -webkit-flex; /* NEW - Chrome */
      display: flex;
      /* 09版 */
      -webkit-box-align: flex-start;
      /* 12版 */
      -webkit-align-items:flex-start;
      -moz-align-items: flex-start;
      -ms-flex-align: flex-start;
      -o-align-items: flex-start;
      align-items:flex-start;
      -webkit-box-pack:flex-start;
      -ms-flex-pack: flex-start;
      justify-content: flex-start;
      margin-top:10px;
      .item-title{
        font-size:14px;
        color:#333;
        font-weight:bold;
        width:30px;
      }
      .item-right{
        width:calc(100% - 30px);
        font-size:12px;
        color:#888;
        .item-span{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          line-height: 22px;
          padding:0 5px;
          cursor: pointer;
          margin-right:10px;
        }
      }
    }
  }
  .address-paner{
    .paner-title{
      font-size:16px;
      font-weight: bold;
      margin-top:20px;
    }
    .address-list{
      overflow: hidden;
      .address-item{
        border:1px solid #eee;
        padding:12px;
        width:300px;
        height:150px;
        cursor: default;
        position: relative;
        float:left;
        margin-right:20px;
        margin-top:20px;
        .text{
          font-size:12px;
          line-height: 20px;
        }
        .address-info{
          margin-top:20px;
          font-size:12px;
          line-height: 20px;
        }
        .btn-div{
          position: absolute;
          right:12px;
          top:0;
        }
      }
      .address-item.add-item{
        text-align: center;
        padding-top:50px;
        cursor: pointer;
      }
      .address-item.add-item:active{
        background: #f8f8f8;
      }
    }
  }
    .tongJitable{
        border-left:1px solid #EBEEF5;
        border-top:1px solid #EBEEF5;
        font-size:12px;
        margin-bottom:20px;
        td{
            border-right:1px solid #EBEEF5;
            border-bottom:1px solid #EBEEF5;
            div.tddiv{
                min-height: 30px;
                line-height: 30px;
                padding:0 5px;
                text-align: center;
                white-space:  nowrap
            }
        }
        .bgtd{
            background: #f5f7fa;
        }
    }
    .fenxi-row{
        overflow: hidden;
        .fenxi-col{
            display: inline-block;
            width:140px;
            text-align: center;
            padding:20px 0 30px 0;
            .name{
                font-size:12px;
            }
            .num{
                font-size:18px;
                font-weight: bold;
                margin-bottom:5px;
            }
        }
    }
</style>
